<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>history test</title>
  </head>
  <body>
    <p><input type="text" /></p>
    <a href="/test1" onclick="return push('/test1')">test1</a><br /><br />
    <button onclick="push('/test2')">push test2</button><br /><br />
    <button onclick="back()">回退</button><br /><br />
    <button onclick="forword()">前进</button><br /><br />
    <button onclick="replace('/test3')">replace test3</button><br /><br />

    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/history/4.7.2/history.js"
    ></script>
    <script type="text/javascript">
      /*
        前端路由的两种模式：
          1. hash
            兼容性好
            路由带 #, 不好看
            location.hash
          2. history
            兼容性稍差
            路由好看
            history
      */
      let history = History.createBrowserHistory(); // 方式一
      history = History.createHashHistory(); // 方式二
      // console.log(history)

      function push(to) {
        history.push(to);
        return false;
      }

      function back() {
        history.goBack();
      }

      function forword() {
        history.goForward();
      }

      function replace(to) {
        history.replace(to);
      }

      history.listen((location) => {
        console.log("请求路由路径变化了", location);
      });
    </script>
  </body>
</html>
